<template>
    <el-tabs v-model="activeTab" class="panel-tabs" tab-position="top">
      <!-- 基本属性 -->
      <el-tab-pane :label="t('bpmn.basicProperties')" name="basic">
        <BasicProperties
            :element="element"
            @update="handleUpdate"
        />
      </el-tab-pane>

      <!-- 用户任务特有属性 -->
      <el-tab-pane
          v-if="isUserTask"
          :label="t('bpmn.taskSettings')"
          name="task"
      >
        <UserTaskProperties
            :element="element"
            @update="handleUpdate"
        />
      </el-tab-pane>

      <!-- 监听器 -->
      <el-tab-pane
          v-if="supportsListeners"
          :label="t('bpmn.listeners')"
          name="listeners"
      >
        <ListenersProperties
            :element="element"
            @update="handleUpdate"
        />
      </el-tab-pane>

      <!-- 文档 -->
      <el-tab-pane
          :label="t('bpmn.documentation')"
          name="documentation"
      >
        <el-input
            v-model="documentation"
            type="textarea"
            rows="6"
            :placeholder="t('bpmn.enterDocumentation')"
            @change="updateDocumentation"
        />
      </el-tab-pane>
    </el-tabs>


</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import BasicProperties from './BasicProperties.vue';
import UserTaskProperties from './UserTaskProperties.vue';
import ListenersProperties from './ListenersProperties.vue';

const { t } = useI18n();
const props = defineProps({
  element: Object
});

const emit = defineEmits(['update']);

// 当前激活的选项卡
const activeTab = ref('basic');
const documentation = ref('');

// 监听元素变化
watch(() => props.element, (newElement) => {
  if (newElement && newElement.businessObject) {
    const docElement = newElement.businessObject.documentation?.[0];
    documentation.value = docElement ? docElement.text : '';
  }
}, { immediate: true });

// 判断是否是用户任务
const isUserTask = computed(() => {
  return props.element?.type === 'bpmn:UserTask';
});

// 判断元素是否支持监听器
const supportsListeners = computed(() => {
  const supportedTypes = [
    'bpmn:UserTask',
    'bpmn:ServiceTask',
    'bpmn:ScriptTask',
    'bpmn:BusinessRuleTask',
    'bpmn:CallActivity'
  ];
  return supportedTypes.includes(props.element?.type);
});

// 处理属性更新
function handleUpdate(properties) {
  emit('update', properties);
}

// 更新文档
function updateDocumentation() {
  emit('update', {
    businessObject: {
      documentation: [
        {
          $type: 'bpmn:Documentation',
          text: documentation.value
        }
      ]
    }
  });
}
</script>

